<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 需求：即使onchange 预览readAsDataURL -->
    <from action="">
        文件：<input type="file" name="myFile" id="myFil" onchange="getFileContent()">
        <input type="submit">


    </from>
    <script>
        /*
                                读取文件内容
                                读取方法：readAsText():读取文本文件（可以使用Txt打开的文件）返回的是文本字符串的值，默认的编码UTF-8
                                readAsaBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看的，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储
                                readAsDataURL();读取一段以data开头的字符串，这段为字符串的本质就是DataURL.DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案，DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储URL中>>优化网站的加载速度和执行效率
                                例：src:指路径(资源定位URL)：src请求的是外部文件，一般来说是服务资源。意味着他需要向服务器发送请求，他站服务器资源
                                <img src="">
                                abort()：中断读取

                        */
        function getFileContent() {
            //   创建文件读取对象
            var reader = new FileReader();

        }
    </script>
</body>

</html>